<template>
  <div id="curriculum">
    <el-card id="notice">
      <el-row type="flex" justify="space-between">
        <el-col>
          <span id="note">[公告]</span>
        </el-col>
        <el-col>
          <a id="more" href="">更多+</a>
        </el-col>
      </el-row>
    </el-card>
    <el-card id="moment">
      <span style="color: #7f7f7f">班级课程统订</span>
    </el-card>
    <el-card id="btable">
      <el-table
          :data="tableData"
          border
          :header-cell-style="isCenter"
          style="width: 100%">
        <el-table-column
            prop="curriculum"
            label="课程">
        </el-table-column>
        <el-table-column
            prop="teacher"
            label="授课教师">
        </el-table-column>
        <el-table-column
            prop="material"
            label="教材">
        </el-table-column>
        <el-table-column
            prop="evaluation"
            label="估价（￥）">
        </el-table-column>
        <el-table-column
            prop="address"
            label="折扣">
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "curriculum",
  data() {
    return {
      queryParams: {
        curriculum: null,
        teacher: null,
        material: null,
        evaluation: null,
        discount: null,
        pageNum: 1,
        pageSize: 10,
      },
      tableData: [],
      total: null,
      loading: false,
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      // this.loading = true;
      listOfCurriculum(this.queryParams).then(response => {
        this.tableData = response.rows;
        this.total = response.total;
        this.loading = false;
      })
    },
    //表格内容居中显示
    isCenter({ row, column, rowIndex, columnIndex }) {
      return 'text-align:center'
    },
  }
}
</script>

<style scoped>
#more {
  float: right;
}

#note {
  float: left;
  color: red;
}

#notice {
  margin: 0 20px;
  height: 50px;
}

#moment {
  margin: 10px 20px;
  display: flex;
}

#btable {
  margin: 10px 20px;
}

#curriculum {
  margin: 0 300px;
}
</style>
